<template>
  <view class="video-wrapper">
    <view class="player-block" @click="onPlay">
      <image :src="posterUrl" />
    </view>
    <slot></slot>
  </view>
</template>

<script>
  export default {
    props: {
      url: String,
    },
    data() {
      return {
        posterUrl: getApp().globalData.requestImgUrl + '/app/video-poster_player.png',
      }
    },
    methods: {
      onPlay() {
        uni.navigateTo({
          url: `/pages/utils/video-player?src=${this.url}`,
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .video-wrapper {
    // 16 / 9 比例
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;

    .player-block {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .video-mask {
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  .video-self {
    width: 700rpx;
    height: 700rpx;
    // position: absolute;
    // background: #e1e1e1;
    // left: -48rpx;
  }
</style>
